<script setup>
import { ref } from 'vue';
defineOptions({
    name: 'AuthCommon',
    inheritAttrs: true,// 是否继承父组件的属性
})
</script>

<template>
    <div class="main-container">
        <div class="left-container">

        </div>
        <div class="right-container">
            <slot name="right"></slot>
        </div>
    </div>
</template>

<style scoped lang="scss">
.main-container {
    display: flex;

    .left-container {
        background-color: rgb(15, 221, 152);
        flex-shrink: 1; // 当空间不足时,该元素是否可以收缩,1表示可以收缩
        flex-grow: 1; // 当有剩余空间时,该元素是否可以扩展,1表示可以扩展
        flex-basis: 0; // 元素在主轴方向上的初始大小,0表示完全依赖flex-grow和flex-shrink来调整大小
    }

    .right-container {
        width: 690px;
        background-color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>
